<p>
	A typeahead example that uses a custom template for results display, an object as the model, and the highlight
	directive to highlight the term inside the custom template.
</p>

<ng-template #rt let-r="result" let-t="term">
	<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" class="me-1" style="width: 16px" />
	<ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>

<div class="mb-3 row">
	<label for="typeahead-template" class="col-xs-3 col-sm-auto col-form-label">Search for a state:</label>
	<div class="col">
		<input
			id="typeahead-template"
			type="text"
			class="form-control col"
			[(ngModel)]="model"
			[ngbTypeahead]="search"
			[resultTemplate]="rt"
			[inputFormatter]="formatter"
		/>
	</div>
</div>

<hr />
<pre>Model: {{ model | json }}</pre>
